<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>

        <el-form :model="queryForm" ref="queryForm" :inline="true" label-width="68px">
            <el-form-item label="模块名称" prop="module">
                <el-input clearable
                          size="small"
                          @keyup.enter.native="handleQuery" v-model="queryForm.module" placeholder="模块名称"></el-input>
            </el-form-item>

            <el-form-item label="接口地址" prop="url">
                <el-input clearable
                          size="small"
                          @keyup.enter.native="handleQuery" v-model="queryForm.url" placeholder="模块名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">清空</el-button>
            </el-form-item>
        </el-form>


        <el-table
                v-loading="loading"
                element-loading-text="加载中"
                element-loading-spinner="el-icon-loading"
                :data="tableData" row-key="id"
                :header-cell-style="{'text-align':'center','color':'grey','font-weight':'600'}"
                :cell-style="{'text-align':'center'}" border style="margin-top: 10px">


            <el-table-column type="index" label="序号" width="60"></el-table-column>
            <el-table-column prop="realName" label="用户"></el-table-column>
            <el-table-column prop="url" label="接口地址"></el-table-column>
            <el-table-column prop="param" label="请求参数" show-overflow-tooltip="true" width="300"></el-table-column>
            <el-table-column prop="time" label="请求耗时"></el-table-column>
            <el-table-column prop="ip" label="IP地址"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">

                    <el-button  size="mini" type="info" icon="el-icon-delete" @click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>

        </el-table>
        <el-pagination
                background
                :page-sizes="[10, 20, 30, 40,50]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :page-size.sync="pageSize"
                :current-page.sync="currentPage"
                @size-change="handleQuery"
                @current-change="handleQuery"
                style="float: right;margin-top: 10px"
        />
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/api/log.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>

    new Vue({
        el: '#app',
        data() {
            return {
                currentPage: 1,
                pageSize: 10,
                total: 0,
                loading: false,
                tableData: [],
                queryForm: {
                    module: '',
                    url: ''
                }
            }
        },
        created() {
            this.handleQuery();
        },
        methods: {
            popConfirm() {
                console.log(11111111)
            },
            handleDelete(row) {
                deleteById('/log/api/delete/' + row.id, this);
            },
            resetQuery() {
                this.queryForm = {}
                this.handleQuery()
            },
            delBtn(e) {
                e.stopPropagation();
            },

            handleCurrentChange(val) {
                this.currentPage = val;
                this.handleQuery();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.handleQuery();
            },
            handleQuery() {
                let queryParam = {
                    pageNo: this.currentPage,
                    pageSize: this.pageSize,
                    module: this.queryForm.module,
                    url: this.queryForm.url
                };
                this.loading = true
                listLog(queryParam).then(res => {
                    if (res.code === "200") {
                        this.tableData = res.data.list;
                        this.total = Number(res.data.count);
                    }
                    this.loading = false
                }).catch(e => {
                    this.loading = false
                });

            }
        }
    });
</script>
</html>
